<template>
    <div class="section-wrap">
        <div class="form-section">
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>单位名称</label>
                </div>
                <!-- <group>
                    <div>
                        <div class="right-select"
                             @click="selectType">
                            {{$store.state.checkcompany.deptName?$store.state.checkcompany.deptName:"请选择"}}
                            <i class="iconfont icon-jinru rightmsg"></i>
                        </div>
                    </div>
                </group> -->
                <div>
                    <p>
                        <!-- {{$store.state.checkcompany.deptName?$store.state.checkcompany.deptName:"请选择"}} -->
                        {{formData.departName?formData.departName:'请选择'}}
                    </p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章编号</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <p>{{formData.brokenRuleNo}}</p>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>违章照片</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                </div>
                <div class="upload-wrap">
                    <upload @setFormData="setFormData"
                            :uploadImgss="formData.uploadImgs"
                            :images="formData.images"
                            :newBlobList="formData.newBlobList"
                            v-if="resetUpload"></upload>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章类型</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <group>
                    <div>
                        <popup-picker :data="list1"
                                      v-model="brokenRuleType"
                                      placeholder="请选择"
                                      @on-show="selectRule"></popup-picker>
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章时间</label>
                </div>
                <group>
                    <div>
                        <datetime v-model="formData.happendDate"></datetime>
                    </div>
                </group>
            </div>
            <!-- <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章区域</label>
                </div>
                <group>
                    <div>
                        <popup-picker :data="list2"
                                      v-model="brokenAreaType"
                                      placeholder="请选择"
                                      @on-show="selectArea"></popup-picker>
                    </div>
                </group>
            </div> -->
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>违章区域</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div style="position:relative;">
                        <span>请选择</span>
                        <group style="position:absolute;top:0;
                        right:0;opacity:0;bottom: 0;overflow:hidden;">
                            <div>
                                <popup-picker :data="list2"
                                              v-model="brokenAreaType"
                                              placeholder="请选择"></popup-picker>
                            </div>
                        </group>
                    </div>
                </div>
                <div>
                    <textarea placeholder="请输入违章描述（自行换行）"
                              v-model="brokenAreaType[0]"></textarea>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章人员</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <group>
                    <div>
                        <div class="right-select"
                             @click="selectPerson">
                            {{$store.state.userInfo.name?$store.state.userInfo.name:"请选择"}}
                            <i class="iconfont icon-jinru rightmsg"></i>
                        </div>
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章单位</label>
                </div>
                <group>
                    <div>
                        <div class="right-select">
                            {{$store.state.userInfo.departName?$store.state.userInfo.departName:""}}
                        </div>
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章班组</label>
                </div>
                <group>
                    <div>
                        <div class="right-select">
                            {{$store.state.userInfo.BanZu?$store.state.userInfo.BanZu:""}}
                        </div>
                    </div>
                </group>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>违章描述</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <!--<a @click="toselectmsg">选择隐患</a>-->
                </div>
                <div>
                    <textarea placeholder="请输入违章描述（自行换行）"
                              v-model="formData.description"></textarea>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>记录人</label>
                </div>
                <group>
                    <div>
                        <input type="text"
                               disabled
                               v-model="formData.recordPerson">
                    </div>
                </group>
            </div>
            <p class="search-btn"
               @click="submit">提交</p>
            <myMenu ref="myMenu"></myMenu>
        </div>
    </div>
</template>
<script type="text/javascript">
import formatDate from '@/utils/formatDate'
import upload from '@/commonComponents/upload/index'
import myMenu from '@/commonComponents/menu'
import { breakType, breakArea } from '@/api/api'

export default {
    components: {
        upload,
        myMenu
    },
    data () {
        return {
            departID: '',
            brokenRuleType: [],
            brokenRuleData: [],
            list1: [],
            brokenAreaType: [],
            brokenAreaData: [],
            list2: [],
            BrImageLength: 0,
            BrImageFormData: '', // 图片上传formData对象
            formData: {
                BrImageLength: 0,
                uploadImgs: [],
                images: [],
                newBlobList: [],
                brokenRuleType: '',
                breakAreaId: '',
                happendDate: '',
                description: ''
            },
            param: {
                allowPaging: true,
                data: 'e34bfe68-4b59-4eda-98ec-aa5901122c54',
                pageIndex: 0,
                pageSize: 1000
            },
            resetUpload: true
        }
    },
    created () {
        this.initData()
    },
    activated () {
        this.formData.breakPerson = this.$store.state.userInfo.name
        this.formData.breakPersonId = this.$store.state.userInfo.id
        this.formData.brokenDeptName = this.$store.state.userInfo.departName
        this.formData.brokenDeptId = this.$store.state.userInfo.ProjectId
        this.$refs.myMenu.flag = false
    },
    mounted () {
    },
    methods: {
        initData () {
            this.param.data = this.$route.query.id
            let userInfo = JSON.parse(localStorage.getItem('userInfo'))
            this.departID = userInfo.deptid
            this.selectArea()
            let model = {}
            // if (localStorage.getItem('breakInfo')) {
            if (this.$store.state.breakInfo) {
                // this.formData = JSON.parse(localStorage.getItem('breakInfo'))
                this.formData = this.$store.state.breakInfo
                model = {
                    deptId: this.$store.state.checkcompany.deptId,
                    deptName: this.$store.state.checkcompany.deptName
                }
                // localStorage.removeItem('breakInfo')
                this.brokenRuleType = this.formData.brokenRuleType
                this.brokenRuleData = this.formData.brokenRuleData
                this.brokenAreaType = this.formData.brokenAreaType
                this.brokenAreaData = this.formData.brokenAreaData
                this.BrImageLength = this.formData.BrImageLength
                //
                this.formData.breakPerson = this.$store.state.userInfo.name
                this.formData.breakPersonId = this.$store.state.userInfo.id
                this.formData.brokenDeptName = this.$store.state.userInfo.departName
                this.formData.brokenDeptId = this.$store.state.userInfo.ProjectId
            } else {
                let userInfo = JSON.parse(localStorage.getItem('userInfo'))
                model = {
                    deptId: userInfo.deptid,
                    deptName: userInfo.deptname
                }
                this.formData.happendDate = this.getdatenew()
            }
            if (this.$store.state.checkcompany.sourceType !== 'breakEdit') {
                this.$store.state.checkcompany = {}
            }
            this.$store.state.checkcompany = model
            this.formData.departID = this.$store.state.checkcompany.deptId
            this.formData.departName = this.$store.state.checkcompany.deptName
            this.formData.recordPerson = userInfo.username
            this.formData.recordPersonId = userInfo.userid
            this.BrImageFormData = this.$store.state.formData

            let newDate = new Date()
            let hours = newDate.getHours() >= 10 ? newDate.getHours() : `0${newDate.getHours()}`
            let minutes = newDate.getMinutes() >= 10 ? newDate.getMinutes() : `0${newDate.getMinutes()}`
            let milliseconds = newDate.getMilliseconds()
            if (milliseconds.toString().length == 2) {
                milliseconds = `0${milliseconds}`
            } else if (milliseconds.toString().length == 1) {
                milliseconds = `00${milliseconds}`
            }
            this.formData.brokenRuleNo = `${formatDate().split('-').join('')}${hours}${minutes}${milliseconds}`
        },
        getdatenew () {
            var date = new Date()
            var seperator1 = '-'
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var strDate = date.getDate()
            if (month >= 1 && month <= 9) {
                month = '0' + month
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = '0' + strDate
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate
            return currentdate
        },
        setFormData (formData, uploadLength, uploadImgs) {
            this.BrImageFormData = formData
            this.BrImageLength = uploadLength
            this.formData.uploadImgs = uploadImgs
            this.formData.BrImageLength = this.BrImageLength
            this.$store.state.formData = this.BrImageFormData
        },
        selectType () {
            this.formData.brokenRuleType = this.brokenRuleType
            this.formData.brokenRuleData = this.brokenRuleData
            this.formData.brokenAreaType = this.brokenAreaType
            this.formData.brokenAreaData = this.brokenAreaData
            this.$store.state.breakInfo = this.formData
            // localStorage.setItem('breakInfo', JSON.stringify(this.formData))
            this.$router.push({ path: '/addCompany3', query: { sourceType: 'breakEdit' } })
        },
        selectPerson () {
            this.formData.brokenRuleType = this.brokenRuleType
            this.formData.brokenRuleData = this.brokenRuleData
            this.formData.brokenAreaType = this.brokenAreaType
            this.formData.brokenAreaData = this.brokenAreaData
            this.$store.state.breakInfo = this.formData
            // localStorage.setItem('breakInfo', JSON.stringify(this.formData))
            this.$router.push({ path: '/addPerson' })
        },
        selectRule () {
            this.list1 = []
            this.brokenRuleType = []
            let param = {
                allowPaging: true,
                data: {},
                pageIndex: 0,
                pageSize: 20
            }
            breakType(param).then((res) => {
                let data = []
                this.brokenRuleData = res.data
                this.brokenRuleData && this.brokenRuleData.forEach(rule => {
                    data.push(rule.TypeName)
                })
                this.list1.push(data)
            })
        },
        selectArea () {
            this.list2 = []
            this.brokenAreaType = []
            let param = {
                allowPaging: true,
                data: {
                    deptId: this.departID,
                    projectId: this.departID
                },
                pageIndex: 0,
                pageSize: 20
            }
            breakArea(param).then((res) => {
                this.brokenAreaData = res.data
                this.list2 = []
                let data = []
                this.brokenAreaData && this.brokenAreaData.forEach(area => {
                    data.push(area.name)
                })
                this.list2.push(data)
            })
        },
        submit () {
            if (!this.formData.brokenRuleNo) {
                this.$vux.toast.text('请输入违章编号')
                return false
            }
            if (!this.BrImageLength) {
                this.$vux.toast.text('请上传违章图片')
                return false
            }
            if (!this.brokenRuleType || this.brokenRuleType.length === 0) {
                this.$vux.toast.text('请选择违章类型')
                return false
            }
            // if (!this.brokenAreaType || this.brokenAreaType.length === 0) {
            //     this.$vux.toast.text('请选择违章区域')
            //     return false
            // }
            if (!this.formData.breakPerson || !this.formData.breakPersonId) {
                this.$vux.toast.text('请选择违章人员')
                return false
            }
            if (!this.formData.description) {
                this.$vux.toast.text('请输入违章描述')
                return false
            }
            this.brokenRuleData.forEach(rule => {
                if (rule.TypeName === this.brokenRuleType[0]) {
                    this.formData.brokenRuleType = rule.ID
                }
            })
            this.brokenAreaData.forEach(area => {
                if (area.name === this.brokenAreaType[0]) {
                    this.formData.breakAreaId = area.id
                }
            })
            this.$vux.loading.show({
                text: '正在提交...'
            })
            let params = {
                allowPaging: true,
                business: 'ReportBrokenRule',
                data: {
                    'breakArea': this.brokenAreaType[0],
                    'breakAreaId': this.formData.breakAreaId,
                    'breakPerson': this.formData.breakPerson,
                    'breakPersonId': this.formData.breakPersonId,
                    'brokenDeptId': this.formData.brokenDeptId,
                    'brokenDeptName': this.formData.brokenDeptName,
                    'brokenRuleNo': this.formData.brokenRuleNo,
                    'brokenRuleType': this.brokenRuleType[0],
                    'deptCode': '000010031001',
                    'deptId': this.formData.departID,
                    'deptName': this.formData.departName,
                    'description': this.formData.description,
                    'happendDate': this.formData.happendDate,
                    'recordPerson': this.formData.recordPerson,
                    'recordPersonId': this.formData.recordPersonId
                },
                method: 'new',
                pageIndex: 0,
                pageSize: 20,
                tokenId: '',
                userId: this.formData.recordPersonId
            }
            this.$axiosAjax.getConfigJson(params, this.BrImageFormData).then((res) => {
                if (res.data.code === 0) {
                    this.$vux.toast.text('提交成功')
                    this.$store.state.breakInfo = ''
                    this.$store.state.userInfo.name = ''
                    this.$store.state.userInfo.id = ''
                    this.$store.state.userInfo.departName = ''
                    this.$store.state.userInfo.ProjectId = ''
                    this.$store.state.formData = ''
                    this.departID = ''
                    this.brokenRuleType = []
                    this.brokenRuleData = []
                    this.list1 = []
                    this.brokenAreaType = []
                    this.brokenAreaData = []
                    this.list2 = []
                    this.BrImageLength = 0
                    this.BrImageFormData = '' // 图片上传formData对象
                    this.resetUpload = false
                    this.formData = {
                        BrImageLength: 0,
                        uploadImgs: [],
                        images: [],
                        newBlobList: [],
                        brokenRuleType: '',
                        breakAreaId: '',
                        happendDate: '',
                        description: ''
                    }
                    this.initData()
                    this.$nextTick(() => {
                        this.resetUpload = true
                    })
                    setTimeout(() => {
                        this.$router.push({ path: '/breakInput' })
                    }, 1000)
                }
            }).catch((res) => {
                console.log(res.data.info)
            }).finally(() => {
                this.$vux.loading.hide()
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';

.form-section {
    .search-btn {
        width: 200px;
        line-height: 40px;
        border-radius: 20px;
        margin: 38px auto;
        text-align: center;
        color: #fff;
        background: #2269ff;
    }
    .search-btn:hover {
        opacity: 0.8;
    }
}

.right-select {
    font-size: 14px;
    color: #999;
    height: 20px;
    overflow: hidden;
    width: 180px;
    position: relative;
    padding-right: 0px;
    line-height: 20px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    // margin-right: -5px;
}

.icon-jinru {
    color: #c8c8cd;
}
</style>
